import React, { useState } from 'react';
import styles from './Articles.module.css';

const Articles = () => {
  // 示例文章数据
  const [articles] = useState([
    { id: 1, title: 'React入门指南', author: '张三', category: '技术', status: '已发布', publishDate: '2023-10-01' },
    { id: 2, title: 'JavaScript高级技巧', author: '李四', category: '技术', status: '草稿', publishDate: '' },
    { id: 3, title: '前端开发趋势', author: '王五', category: '行业动态', status: '已发布', publishDate: '2023-09-15' },
    { id: 4, title: 'CSS布局详解', author: '赵六', category: '技术', status: '已发布', publishDate: '2023-08-20' },
    { id: 5, title: 'Vue vs React对比', author: '钱七', category: '技术', status: '审核中', publishDate: '' },
  ]);

  const [newArticle, setNewArticle] = useState({ 
    title: '', 
    author: '', 
    category: '技术',
    status: '草稿'
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewArticle(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在实际应用中，这里会调用API添加文章
    alert(`添加文章: ${newArticle.title} (${newArticle.author})`);
    setNewArticle({ title: '', author: '', category: '技术', status: '草稿' });
  };

  return (
    <div className={styles.container}>
      <h1 className={styles.title}>文章管理</h1>
      
      <div className={styles.card}>
        <h2>文章列表</h2>
        <div className={styles.tableContainer}>
          <table className={styles.table}>
            <thead>
              <tr>
                <th>ID</th>
                <th>标题</th>
                <th>作者</th>
                <th>分类</th>
                <th>状态</th>
                <th>发布日期</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {articles.map(article => (
                <tr key={article.id}>
                  <td>{article.id}</td>
                  <td>{article.title}</td>
                  <td>{article.author}</td>
                  <td>{article.category}</td>
                  <td>
                    <span className={`${styles.status} ${article.status === '已发布' ? styles.published : article.status === '草稿' ? styles.draft : styles.reviewing}`}>
                      {article.status}
                    </span>
                  </td>
                  <td>{article.publishDate || '-'}</td>
                  <td>
                    <button className={`${styles.button} ${styles.editButton}`}>编辑</button>
                    <button className={`${styles.button} ${styles.deleteButton}`}>删除</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className={styles.card}>
        <h2>添加新文章</h2>
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>标题:</label>
            <input
              type="text"
              name="title"
              value={newArticle.title}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>作者:</label>
            <input
              type="text"
              name="author"
              value={newArticle.author}
              onChange={handleInputChange}
              className={styles.formInput}
              required
            />
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>分类:</label>
            <select
              name="category"
              value={newArticle.category}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="技术">技术</option>
              <option value="行业动态">行业动态</option>
              <option value="产品更新">产品更新</option>
              <option value="公司新闻">公司新闻</option>
            </select>
          </div>
          <div className={styles.formGroup}>
            <label className={styles.formLabel}>状态:</label>
            <select
              name="status"
              value={newArticle.status}
              onChange={handleInputChange}
              className={styles.formSelect}
            >
              <option value="草稿">草稿</option>
              <option value="审核中">审核中</option>
              <option value="已发布">已发布</option>
            </select>
          </div>
          <button type="submit" className={styles.submitButton}>添加文章</button>
        </form>
      </div>
    </div>
  );
};

export default Articles;